<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-pink" :cusBack="cusBack" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">会员充值</block>
			</cu-custom>
			<!-- list列表 -->
			<view class="crown-list">
				<view class="crown-item" :class="activeId==crown.id ? 'active':''" :key="crown.id" v-for="crown in crownList" @click="getOrderSn(crown)">
					<view class="desc">{{crown.description}}</view>
					<view class="detail" :style="{backgroundColor: crown.itemColor}">
						<view>{{crown.itemText}}</view>
						<text>¥{{crown.itemValue / 100}}元</text>
					</view>
					<view class="permission" v-if="crown.withPermission">
						已购买
					</view>
				</view>
			</view>
			<view style="width: 80vw;margin-left: 10vw;margin-top: 10px;">
				<button type="primary" @click="payment">确认协议并支付</button>
				<view style="margin-top: 5px;display: flex;justify-content: center;">
					<checkbox-group @change="(val)=>checked=val.detail.value[0]">
						<checkbox class='round' value="select" ></checkbox>
					</checkbox-group>
					<view style="display: flex;align-items: center;margin-left: 5px;">
						<text>开通会员并接受</text>
						<navigator style="color: #1aad19;" class="action" url="/pages/user/crownprotocol">
							<text>《会员服务协议》</text>
						</navigator>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	import {mapActions, mapGetters} from "vuex"
	import {getWxUserInfo} from "../../common/luch-request/wxLogin";
	export default {
		data() {
			return {
				 crownList: [],
				 checked: null,
				 params: null,
				 activeId: null,
			};
		},
		onLoad() {
			this.getCrownList()
			
		},
		methods: {
		  cusBack() {
      this.$Router.back();
			// this.$Router.push('/pages/user/people')
		  },
		  getOrderSn(item){
			  if (item.withPermission) return
			  this.params = null
			  this.activeId = item.id
			  const openId = this.$store.getters.userid
			  console.log(openId)
			  const params = {
					orderType: '商品订单',
					totalPrice: item.itemValue * 1,
					goodsName: item.itemText,
					openId,
				}
			  this.$http.get('/biz/wxpay/getOrderSn').then(res => {
			  	console.log('getOrderSn', res)
			  	params.orderSn = res?.data?.result
				this.params = params
			  })
		  },
		  getCrownList() {
			const url = 'https://www.jiakaogo.cn/jeecg-boot/sys/dictItem/list?pageNo=1&pageSize=10&dictId=1763148992033652737&_t=1710428647346'
			this.$http.get(url).then( res=> {
				this.crownList = res?.data?.result?.records || []
				const vipLevel = this.$store.getters?.userInfo?.vipLevel || ''
				this.crownList.forEach(item=>{
					item.withPermission = vipLevel.includes(item.itemText)
				})
				console.log(this.crownList)
			})
		  },
		  payment() {
			  console.log(this.checked, 'this.checked')
			  if (!this.params || !this.checked) return
			  this.$http.post('/biz/wxpay/createOrder', this.params).then(res=>{
				  const result = res?.data?.result || {}
				  console.log(result)
				  wx.requestPayment
				  (
				    {
						timeStamp: result.timeStamp + '',
						nonceStr: result.nonceStr,
						package: result.prepayId,
						signType: 'MD5',
						paySign: result.paySign,
						success:(res)=>{
							  console.log('支付成功', res)
							  this.onWxLogin()
						},
						fail:function(res){
							  console.log('支付失败', res)
						},
						complete:function(res){
							  console.log('支付组件', res)
						}
				    }
				  )
			  })
		  },
		  ...mapActions(["wxLogin"]),
		  onWxLogin() {
			  const code = this.$store.state.code
		    // event 获取微信手机号参数
		    uni.showToast({
		      title: '正在登录',
		      duration: 500
		    });
		    getWxUserInfo().then(jsCode => {
		      let wxInfo = this.$store.state.user.wxInfo || {}
		      console.log(wxInfo)
		      this.loading = true;
		      // uni.showLoading({title: '加载中'})
		      this.wxLogin({
		        code,
		        userInfo: wxInfo,
		        ...wxInfo,
		        sex: wxInfo.gender == 0 ? 1 : 2,
		        username: wxInfo.nickName,
		        realname: wxInfo.nickName,
		        jsCode,
		        password: 'admin@123'
		      }).then(res => {
		        const {result: data} = res.data;
		        console.log(data)
				this.$Router.push('/pages/user/people')
		      })
		    }).catch(err => {
		      console.log(err)
		    })
		  },
	  }
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}
	.crown-list {
		width: 80vw;
		margin-left: 10vw;
		max-height: calc(100vh - 160px);
		overflow-y: auto;
	}
	.crown-item {
		height: 120px;
		margin-top: 20px;
		text-align: center;
		font-size: 14px;
		overflow: hidden;
		border-radius: 10px;
		position: relative;
	}
	.crown-item .permission {
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
		width: 100%;
		height: 100%;
		line-height: 120px;
		text-align: left;
		font-size: 20px;
		text-indent: 10px;
	}
	.crown-item.active{
		border: 2px solid #1aad19;
	}
	.crown-item .desc {
		line-height: 30px;
		background-color: #40f5e4;
	}
	.crown-item .detail {
		height: calc(100% - 3px);
	}
	.crown-item .detail view {
		line-height: 60px;
		font-size: 18px;
	}
</style>
